<template>
  <div class="column">
    <div class="title">
        <img src="~@/assets/images/login/titleIcon.png" alt="">
        <span>{{title}}</span>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: ''
        }
    }
}
</script>

<style lang="scss" scoped>
.column{
    border-radius: 8px;
    background: rgba(255, 255, 255, 1);
    padding: 18px 16px;
    margin-bottom: 16px;
    box-sizing: border-box;
    .title{
        display: flex;
        align-items: center;
        >img{
            width: 24px;
            height: 24px;
            margin-right: 8px;
        }
        >span{
            color: $mainColor;
            font-family: OPPOSans;
            font-weight: bold;
            font-size: 16px;
        }
        padding-bottom: 19px;
        border-bottom: 1px solid  $mainColor;
        margin-bottom: 16px;
    }
}
</style>